<template>
    <div class="app-container">
      学生成绩
      <el-form :inline="true" class="demo-form-inline" style="padding: 5px 20px;">
        <el-form-item label="学生编号">
          <el-input v-model="studentQuery.number" placeholder="输入学号"></el-input>
        </el-form-item>
        <el-form-item label="试卷编号">
          <el-input v-model="studentQuery.testid" placeholder="输入卷号"></el-input>
        </el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getListByNum()"></el-button>
          <el-button type="default" @click="resetDate()">清空</el-button>
      </el-form>
      班级成绩
      <el-form :inline="true" class="demo-form-inline" style="padding: 5px 20px;">
        <el-form-item label="学生班级">
          <el-input v-model="studentQuery.class" placeholder="输入班级"></el-input>
        </el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getListByClass()"></el-button>
          <el-button type="default" @click="resetDate()">清空</el-button>
      </el-form>
    <el-table
      :data="list"
      stripe
      style="width: 100%"
      fit
      highlight-current-row
      >
      <el-table-column
        prop="studentName"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="studentNumber"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="studentSex"
        label="性别">
      </el-table-column>
      <el-table-column
        prop="studentClass"
        label="班级"
        width="180">
      </el-table-column>

      <el-table-column
        prop=""
        label="成绩"
        width="180">
      </el-table-column>
    </el-table>

    <el-pagination
        :current-page="cur"
        :page-size="size"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next,jumper"
        @current-change="getList">
    </el-pagination>
  </div>
</template>

<!--引入接口方法加载 该方法会连接后端 发送请求获取数据异步响应在页面-->
<script>
    import PanThumb from "@/components/PanThumb"

    export default {
        components:{PanThumb},
        data(){
            return {
                cur:1,
                size:5,
                studentQuery:{
                  number:'',
                  class:'',
                  testid:''
                },
                list: null,
                total: 0
            }
        },
        methods:{
            getListByNum(){
                this.$axios.get("/examsystem/student/findTotalMark",
                    {params:{
                      studentNumber: this.studentQuery.number
                      ,testId: this.studentQuery.testid}
                    }
                )
                .then(res=>{
                    console.log(res)
                })
            },
            getListByClass(){
                this.$axios.get("/examsystem/student/findStudentsMark",
                    {params:{
                      classes: this.studentQuery.class}
                    }
                )
                .then(res=>{
                    console.log(res)
                })
            },
            
            
            resetDate(){
              this.studentQuery={}
            },
            
        },
    }

</script>